<template>
	<el-container>
		<el-aside width="300px" v-loading="menuloading">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="menuFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="menu" class="menu" node-key="id" :data="menuList" :props="menuProps" draggable highlight-current accordion show-checkbox 
   @check="checkNode" :expand-on-click-node="false" :filter-node-method="menuFilterNode" @node-click="menuClick" @node-drop="nodeDrop" style="padding: 10px">
						<template #default="{node, data}">
							<span class="custom-tree-node">
								<span class="label">
									{{ node.label }}
								</span>
								<span class="do">
									<el-button-group>
										<el-button icon="el-icon-plus" size="small" @click.stop="addMenu(0, data.id)"></el-button>
										<el-button icon="el-icon-delete" size="small" @click.stop="delMenu(node, data)" :disabled="data.children!=null"></el-button>
									</el-button-group>
								</span>
							</span>
						</template>
					</el-tree>
				</el-main>
				<el-footer style="height:51px;text-align: center;">
					<el-button type="primary" size="small" icon="el-icon-plus" @click="addMenu(0,0)">添加菜单</el-button>
					<el-button type="danger" size="small" icon="el-icon-delete" @click="delMenu" :disabled="!showDelete">删除菜单</el-button>
				</el-footer>
			</el-container>
		</el-aside>
		<el-container>
			<el-main class="nopadding" style="padding:20px;" ref="main">
				<save ref="save" :menu="menuList" @success="refreshNode" :showEdit="showEdit"></save>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import save from './save'
	
	export default {
		name: "settingMenu",
		components: {
			save
		},
		data(){
			return {
				menuloading: false,
				menuList: [],
				menuProps: {
					label: (data)=>{
						return data.label
					}
				},
				menuFilterText: "",
				nodeId: 0,
				showEdit: false,
				showDelete: false,
			}
		},
		watch: {
			menuFilterText(val){
				this.$refs.menu.filter(val);
			}
		},
		mounted() {
			this.getMenu();
		},
		methods: {
			//加载树数据
			async getMenu(){
				this.menuloading = true
				var res = await this.$API.system.menu.treeselect.get();
				this.menuloading = false
				this.menuList = res.data;
			},
			//树点击
			menuClick(data,node){
				this.nodeId = data.id;
				var pid = node.level==1?undefined:node.parent.data.id;
				this.$refs.save.setData(data.id,pid)
				this.$refs.main.$el.scrollTop = 0;
				this.showEdit = true;
			},
			//选择节点
			checkNode(){
				this.showDelete = false;
				var CheckedNodes = this.$refs.menu.getCheckedNodes();
				if (CheckedNodes.length > 0){
					this.showDelete = true;
				}
			},
			//树过滤
			menuFilterNode(value, data){
				if (!value) return true;
				var targetText = data.label;
				return targetText.indexOf(value) !== -1;
			},
			//树拖拽
			async nodeDrop(draggingNode, dropNode, dropType){
				var res = await this.$API.system.menu.dragMenu.put(dropType, draggingNode.data.id,dropNode.data.id);
				if (res.code == 200){
					this.$message.success("操作成功");
					//this.$message(`拖拽对象：${draggingNode.data.label}+${draggingNode.data.id}, 释放对象：${dropNode.data.label}+${dropNode.data.id}, 释放对象的位置：${dropType}`)
				}
			},
			//增加菜单
			async addMenu(menuId,pid){
				if (pid == 0){
					// 清空节点
					this.nodeId = 0;
				}
				this.$refs.save.setData(menuId,pid);
				this.showEdit = true;
			},
			//删除菜单
			async delMenu(node, data){
				//this.$refs.menu.remove(node);
				// var newMenuData = {
				// 	parentId: 1,
				// 	name: "newMenuName",
				// 	path: "",
				// 	component: "",
				// 	meta:{
				// 		title: "newMenuName",
				// 		type: "menu"
				// 	}
				// }
				//this.$refs.menu.append(newMenuData,node);

				// let node1 = this.$refs.menu.getNode(1);
				// if (node1) {
				// 	console.log(node1)
				// 	node1.loaded = false;
				// 	node1.data.label = "12123123";
				// 	node1.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
				// }
				// this.$refs.menu.append(newMenuData,node);
				// refreshTreeNode(id) {
				// let node = this.$refs.treeRef.getNode(id);
				// if (node) {
				// 	node.loaded = false;
				// 	node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
				// }
				// },
				// 同步更新菜单

				// 重新获取菜单
				// var CheckedNodes = this.$refs.menu.getCheckedNodes()
				// if(CheckedNodes.length == 0){
				// 	this.$message.warning("请选择需要删除的项")
				// 	return false;
				// }

				this.$confirm(`确认要删除已选择的菜单吗？`, '提示', {
					type: 'warning',
					confirmButtonText: '删除',
					confirmButtonClass: 'el-button--danger'
				}).then(async () => {
					this.menuloading = true
					var res = await this.$API.system.menu.delMenu.delete(data.id);
					// var reqData = {
					// 	ids: CheckedNodes.map(item => item.id)
					// }
					// var res = await this.$API.mock.post.post(reqData)
					if(res.code == 200){
						this.$refs.menu.remove(node);
						this.$message.success("操作成功");
					// 	// CheckedNodes.forEach(item => {
					// 	// 	var node = this.$refs.menu.getNode(item)
					// 	// 	if(node.isCurrent){
					// 	// 		this.$refs.save.setData({})
					// 	// 	}
					// 	// 	this.$refs.menu.remove(item)
					// 	// })
					} else {
						this.$message.warning(res.msg)
					}
					this.menuloading = false

				}).catch(() => {

				})

				// var confirm = await this.$confirm('确认要删除已选择的菜单吗？','提示', {
				// 	type: 'warning',
				// 	confirmButtonText: '删除',
				// 	confirmButtonClass: 'el-button--danger'
				// }).catch(() => {})

				// if(confirm != 'confirm'){
				// 	return false
				// }
				
				// if(res.code == 200){
				// 	this.$message.success("操作成功")
				// } else {
				// 	this.$message.warning(res.msg)
				// }
			},
			// 更新节点
			refreshNode(data,mode){
				if (mode == "append"){
					var nodeData = {
						id: data.menuId,
						label: data.menuName
					}
					if (this.nodeId == 0){
						// 一级菜单
						this.$refs.menu.append(nodeData);
					}
					else {
						let parentNode = this.$refs.menu.getNode(this.nodeId);
						this.$refs.menu.append(nodeData,parentNode);
					}
				} else {
					let updateNode = this.$refs.menu.getNode(this.nodeId);
					if (updateNode) {
						updateNode.loaded = false;
						updateNode.data.label = data.menuName;
						updateNode.expand();
					}
				}
			},
			// 删除节点
			deleteNode(nodeId){
				let deleteNode = this.$refs.menu.getNode(nodeId);
				this.$refs.menu.remove(deleteNode);
			}	
		},
	}
</script>

<style scoped>
	.menu:deep(.el-tree-node__label) {display: flex;flex: 1;height:100%;}
	.custom-tree-node {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 14px;height:100%;padding-right:24px;}
	.custom-tree-node .label {display: flex;align-items: center;;height: 100%;}
	.custom-tree-node .label .el-tag {margin-left: 5px;}
	.custom-tree-node .do {display: none;}
	.custom-tree-node .do i {margin-left:5px;color: #999;}
	.custom-tree-node .do i:hover {color: #333;}

	.custom-tree-node:hover .do {display: inline-block;animation: fadeIn;animation-duration: 1s;}
</style>
